import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, withRouter } from "react-router-dom";
import Cookies from 'js-cookie'
import { Button, Input, message, Table, Modal } from 'antd';
import { LinkOutlined, GiftFilled, CopyOutlined } from '@ant-design/icons';
import './App.css';
import Connect from './Connect';
import Header from './Header';
import Footer from './Footer';
import logo from './yfim.png';
import slogo from './yfimlogo.png';
import qrcode from './qrcode.png';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: Cookies.get('isShow'),
            visible: false,
            columns: [
              {
                title: '时间',
                dataIndex: 'time',
                key: 'time',
              },
              {
                title: '转入',
                dataIndex: 'input',
                key: 'input',
              },
              {
                title: '获得',
                dataIndex: 'achieve',
                key: 'achieve',
              },
            ],
            data: [
              {
                time: '1',
                input: 'John Brown',
                achieve: 32,
              },
              {
                time: '2',
                input: 'Jim Green',
                achieve: 42,
              },
              {
                time: '3',
                input: 'Joe Black',
                achieve: 32,
              },
            ]
        }
    };
    invite() {
        this.props.history.push({
            pathname: '/list'
        });
        Cookies.set('tab', '3')
    }
    componentDidMount() {
        // if (address === '') {
        //     $('.alert .text').text(trans[tnum]['msg_v1']);
        //     $('.alert').addClass('show');
        // } else if (address.length > 1 && address.substr(0, 2) !== '0x' || address.length !== 42) {
        //     $('.alert .text').text(trans[tnum]['msg_v2']);
        //     $('.alert').addClass('show');
        // }
        console.log('document', document.body.clientHeight)
        this.refs.home_box.style.height = `${document.body.clientHeight}px`;
    };
    handleClick() {
        console.log('2222', this.refs.addr_input.state.value)
        const address = this.refs.addr_input.state.value;
        if (address === '' || !address) {
            message.error('请输入你的地址');
        } else if (address.length > 1 && address.substr(0, 2) !== '0x' || address.length !== 42) {
            message.error('请输入有效的ETH地址');
        } else {
            console.log('3333')
            Cookies.set('isShow', true);
            this.setState({
                show: true
            })
        }
    }
    showModal() {
        this.setState({
            visible: !this.state.visible
        })
    }
    onCancel() {
        this.setState({
            visible: !this.state.visible
        })
    }
    render() {
        const isShow = this.state.show;
        let showClass = 'home_hide';
        if (isShow) {
            showClass = 'home_show'
        }
        console.log('444', isShow)
        return (
            <div className="App">
                <div className="home_box" ref="home_box">
                    <Header />
                    <div className="home_text">
                        <div><img src={logo}></img></div>
                        <div className="">Defi-club是一个基于智能合约的去中心化投资平台，<br />
                        专注为用户提供 DeFi 聚合理财服务。<br />
                        从众多 DeFi 流动性挖矿产品中，根据年化收益率、安全系数、理财周期等因素，<br />
                        自动选择和配置最符合广大用户利益的产品，让复杂的流动性挖矿变得无比简单省事。<br />
                        挖矿收益将按比例分发给所有用户，没有本金抽成，公平公正，为用户创造价值。</div>
                        <Button className="join" style={{background: '#5e72e4',color: '#fff', border: '#5e72e4'}}>参与空投</Button>
                    </div>
                </div>
                <div id="main">
                    <div className={isShow?'home_hide':'home_show'}>
                        <p>ETH 地址</p>
                        <div>
                            <Input className="addr_input" ref="addr_input" style={{width: 500,marginRight: 20}} placeholder="请输入你的地址" />
                            <Button style={{background: '#5e72e4',color: '#fff'}} onClick={() => this.handleClick()}>提交</Button>
                        </div>
                    </div>
                    <div className={!isShow?'home_hide':'home_show'}>
                        <div className="hide_card">
                            <ul>
                                <li>
                                    <i style={{background: '#1890ff',marginTop:'15px'}}><img src={slogo} /></i>
                                    <b>1.10 YFIM</b>
                                    <span>余额</span>
                                </li>
                                <li>
                                    <i style={{color: '#5e72e4', fontSize: '28px'}}><GiftFilled /></i>
                                    <b>1 人</b>
                                    <span>已邀请</span>
                                </li>
                                <li>
                                    <i style={{color: '#fb6340', fontSize: '28px'}}><LinkOutlined /></i>
                                    <b>1.10 YFIM</b>
                                    <span>邀请奖励</span>
                                </li>
                                <div className="clear"></div>
                            </ul>
                        </div>
                        <div className="hide_addr">
                            <div className="hide_title">众筹地址</div>
                            <div className="addr_text">
                                <i style={{}}><CopyOutlined /></i>0xc629a593b8a5274d538581f7681e91fdc935fe1f
                            </div>
                            <div className="hide_note">1 ETH=100 YFIM 总量25000 YFIM 额度按照时间排序，开始发放代币， 越早参与成功率越大。</div>
                            <div className="your_addr">使用您的钱包 0x245A074cA9814fB46A21562bC70fAB92F8A3F779 发送ETH到众筹地址。</div>
                        </div>
                        <div className="hide_history">
                            <div className="hide_title">认购记录</div>
                            <Table columns={this.state.columns} dataSource={this.state.data} />
                        </div>
                        <div className="hide_invite">
                            <div className="hide_title">
                                邀请链接<div className="qrcode" onClick={() => this.showModal()}>我的二维码</div>
                            </div>
                            <Modal
                                title="我的二维码"
                                visible={this.state.visible}
                                footer={null}
                                onCancel={() => this.onCancel()}
                            >
                                <p className="modal_qrcode"><img src={qrcode}></img></p>
                                <p className="modal_qrcode">我的二维码</p>
                            </Modal>
                            <div><i style={{}}><CopyOutlined /></i><a href="#">https://yfi.mobi/?BDC50964</a></div>
                            <div className="invite_note">复制并分享你的链接，你和被邀请人同时奖励 0.1 YFIM，每人最多可邀请 20人。每人最多获得 2 YFIM， 如被识别为作弊， 将取消奖励。如参与众筹，将执行退款。</div>
                        </div>
                    </div>
                </div>
                <div className="home_list">
                    <ul>
                        <li>
                            <i style={{background: '#fb6340'}}><img src={slogo} /></i>
                            <b style={{color: '#fb6340'}}>空投说明</b>
                            <ul className="home_list_list">
                                <li>YFIM总量60000枚， 本次YFIM空投数量4000枚</li>
                                <li>YFIM总量60000枚， 本次YFIM空投数量4000枚</li>
                            </ul>
                        </li>
                        <li>
                            <i style={{background: '#5e72e4'}}><img src={slogo} /></i>
                            <b style={{color: '#5e72e4'}}>空投说明</b>
                            <ul className="home_list_list">
                                <li>YFIM总量60000枚， 本次YFIM空投数量4000枚</li>
                                <li>YFIM总量60000枚， 本次YFIM空投数量4000枚</li>
                            </ul>
                        </li>
                        <li>
                            <i style={{background: '#2dce89'}}><img src={slogo} /></i>
                            <b style={{color: '#2dce89'}}>空投说明</b>
                            <ul className="home_list_list">
                                <li>YFIM总量60000枚， 本次YFIM空投数量4000枚</li>
                                <li>YFIM总量60000枚， 本次YFIM空投数量4000枚</li>
                            </ul>
                        </li>
                        <div className="clear"></div>
                    </ul>
                </div>
                <Footer />
            </div>
          );
      }
}
export default App;
